<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="model">
    <!-- Modal 1-->
    <div class="modal fade" id="myModal_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel_1">集群添加</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">名称</div>
                                <input class="form-control" name = "name" type="text" placeholder="输入集群名称"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="toAddData(true)">保存</button>
                </div>
            </div>
        </div>
    </div>

<!-- Modal 2-->
<div class="modal fade" id="myModal_2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel_2">节点添加</h4>
            </div>
            <div class="modal-body" style="text-align: center">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="ip" class="col-sm-2 control-label">服务 ip</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="ip" id="ip" placeholder="输入IP"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="port" class="col-sm-2 control-label">服务 port</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="port" id="port" placeholder="输入端口"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cluster" class="col-sm-2 control-label">所属集群</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="cluster" id="cluster">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="toAddData(true)">保存</button>
            </div>
        </div>
    </div>
</div>





<!-- Modal 3-->
<div class="modal fade" id="myModal_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel_3">集群修改</h4>
            </div>
            <div class="modal-body" style="text-align: center">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">名称</div>
                            <input name = "uuid" type="hidden"/>
                            <input class="form-control" name = "name" type="text" placeholder="输入集群名称"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="toAddData(false)">保存</button>
            </div>
        </div>
    </div>
</div>



<!-- Modal 4-->
<div class="modal fade" id="myModal_4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_4" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel_4">节点修改</h4>
            </div>
            <div class="modal-body" style="text-align: center">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="ip2" class="col-sm-2 control-label">服务 ip</label>
                        <div class="col-sm-8">
                            <input name = "uuid" type="hidden"/>
                            <input type="text" class="form-control" name="ip" id="ip2" placeholder="输入IP"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="port2" class="col-sm-2 control-label">服务 port</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="port" id="port2" placeholder="输入端口"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cluster2" class="col-sm-2 control-label">所属集群</label>
                        <div class="col-sm-8">
                            <select class="form-control" name="cluster" id="cluster2">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="toAddData(false)">保存</button>
            </div>
        </div>
    </div>
</div>




<!-- Modal 5-->
<div class="modal fade" id="myModal_5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_5" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel_5">节点查看</h4>
            </div>
            <div class="modal-body" style="text-align: center">
                <div id="serverData">
                    <div class="row">
                        <div class="col-md-4">
                            <button class="btn btn-success">192.168.111.128:2181</button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-success">192.168.111.128:2181</button>
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-success">192.168.111.128:2181</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <span>（注：双击节点可以进行删除）</span>
            </div>
        </div>
    </div>
</div>
</div>
</html>













